import React,{useState} from 'react';
import {connect} from 'react-redux'

const State = (props) => {
  const {data, dispatch} = props;
  const doneList = data.filter(item => item.done);
  const unDoneList = data.filter(item => !item.done);

  return (
    <div id="todo-stats">
      <span className="todo-count">
        <span className="number">{unDoneList.length}</span> <span className="word">项待完成</span>
      </span>
      <span className="todo-clear">
        <a 
          href="#"
          onClick={()=>{
            dispatch({
              type: 'REMOVE_SELECT'
            })
          }}
        >
          Clear <span>{doneList.length}</span> 已完成事项
        </a>
      </span>
    </div>
  )
}

export default connect((state, props) => {
  return {
    ...props,
    data: state.data
  }
})(State);
